<template>
  <el-tabs v-model="tabPaneVal" type="border-card" @tab-click="handleClick">
    <el-tab-pane label="司机资料" name="DriverEdit">
      <compEdit v-if="isDriverEditShow" :parent-data="parentData" />
    </el-tab-pane>
    <el-tab-pane label="常跑线路" name="VehicleTeam">
      <compCommonRoutInfoList v-if="isVehicleTeamShow" :parent-data="parentData" />
    </el-tab-pane>
    <el-tab-pane label="申请加入车队" name="ApplyToTeam">
      <compApplyToVehicleTeam v-if="isApplyToTeamShow" :parent-data="parentData" />
    </el-tab-pane>
    <el-tab-pane label="申请记录" name="ApplyTeamRecord">
      <compApplyRecord v-if="isApplyTeamRecordShow" :parent-data="parentData" />
    </el-tab-pane>
    <el-tab-pane label="我的车队" name="MyVehicleTeam">
      <compMyVehicleTeam v-if="isMyVehicleTeamShow" :parent-data="parentData" />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import compEdit from "./components/driverEdit.vue";
import compCommonRoutInfoList from "./components/commonRouteInfo/commonRouteInfoList";
import { SelectAddress } from "@/api/orderform";
import { getListDict } from "@/api/commonApi";
import compApplyToVehicleTeam from "./components/vehicleTeam/applyToVehicleTeam";
import compApplyRecord from "./components/vehicleTeam/applyRecord";
import compMyVehicleTeam from "./components/vehicleTeam/myVehicleTeam";

export default {
  name: "InfoDriverForm",
  components: {
    compEdit,
    compCommonRoutInfoList,
    compApplyToVehicleTeam,
    compApplyRecord,
    compMyVehicleTeam
  },
  data() {
    return {
      tabPaneVal: "DriverEdit",
      isDriverEditShow: true,
      isVehicleTeamShow: false,
      isApplyToTeamShow: false,
      isApplyTeamRecordShow: false,
      isMyVehicleTeamShow: false,
      parentData: {
        showInfo: true,
        areaOptions: [],
        vehicleTypeAllowList: [],
        vehicleClassificationList: [],
        vehicleLengthList: [],
        vehicleWidthList: [],
        vehicleHighList: [],
        vehicleTonnageList: [],
        locationSourceList: []
      }
    };
  },
  created() {
    SelectAddress().then(response => {
      this.parentData.areaOptions = response.data.records;
    });
    // 获取数据字典： 准驾车型，车型，车长，车宽，车高，吨位，定位来源
    getListDict({
      types:
        "vehicleTypeAllow,vehicleClassification,vehicleLength,vehicleWidth,vehicleHigh,vehicleTonnage,locationSource"
    }).then(response => {
      this.parentData.vehicleTypeAllowList = response.data.filter(
        item => item.type === "vehicleTypeAllow"
      )[0]["dictList"];
      this.parentData.vehicleClassificationList = response.data.filter(
        item => item.type === "vehicleClassification"
      )[0]["dictList"];
      this.parentData.vehicleLengthList = response.data.filter(
        item => item.type === "vehicleLength"
      )[0]["dictList"];
      this.parentData.vehicleWidthList = response.data.filter(
        item => item.type === "vehicleWidth"
      )[0]["dictList"];
      this.parentData.vehicleHighList = response.data.filter(
        item => item.type === "vehicleHigh"
      )[0]["dictList"];
      this.parentData.vehicleTonnageList = response.data.filter(
        item => item.type === "vehicleTonnage"
      )[0]["dictList"];
      this.parentData.locationSourceList = response.data.filter(
        item => item.type === "locationSource"
      )[0]["dictList"];
    });
  },
  methods: {
    handleClick(tab, event) {
      switch (tab.name) {
        case "VehicleTeam":
          this.isVehicleTeamShow = true;
          break;
        case "ApplyToTeam":
          this.isApplyToTeamShow = true;
          break;
        case "ApplyTeamRecord":
          this.isApplyTeamRecordShow = true;
          break;
        case "MyVehicleTeam":
          this.isMyVehicleTeamShow = true;
          break;
      }
    }
  }
};
</script>
